(function ($) {
  "use strict";
  /*
  * author GL
  * params = {
  *   input 当前绑定事件的节点 String
  *   title 标题 String
  *   item 选项 Array
  * }
  * */
  var defaults = {
    target: 'input',
    title: "标题",
    item: [{
      nav: '类型1',
      option: ['选项1', '选项2', '选项3']
    },{
      nav: '类型2',
      option: ['option1', 'option2']
    }]
  };
  $.fn.select = function (option) {
    var self = $(this);
    option = $.extend({},option);
    option.target = self;
    self.prop("readonly", true);
    self.on("click", function () {
      $.select(option);
    });
  };
  $.select = function (option) {
    var params = $.extend({},defaults,option);
    var navTpl = '';
    var selectTpl = '';
    $.each(params.item, function (i) {
      navTpl += '<span class="'+(i===0?'active':'')+'">'+params.item[i].nav+'</span>';
      selectTpl += '<div class="gzl-select__list gzl-cell_check">';
      $.each(params.item[i].option, function (j) {
        var isObj = params.item[i].option[j].constructor === Object;
        var val = isObj?params.item[i].option[j].name:params.item[i].option[j];
        selectTpl += '<div class="gzl-select__option"><input data-val="'+val+'" '+(isObj?'data-type="'+params.item[i].option[j].type+'"':'')+' class="gzl-check" name="select'+i+'"  type="radio"><em class="gzl-check__info">'+val+'</em><svg class="icon gzl-check__icon"><use xlink:href="#icon-tick"></use></svg></div>';
      });
      selectTpl += '</div>';
    });
    var tpl = '<div class="gzl-select-popup"><div class="gzl-select__mask"></div>' +
      '<div class="gzl-select__box">' +
      '<div class="gzl-select__hd">' +
      '<div class="gzl-select__close"><svg class="icon"><use xlink:href="#icon-close"></use></svg></div>' +
      '<div class="gzl-select__tit"><strong>'+params.title+'</strong></div>' +
      (params.item.length>1?'<div class="gzl-select__nav">'+navTpl+'</div>':'') +
      '</div>' +
      '<div class="gzl-select__bd">' +
      selectTpl +
      '</div>' +
      '</div>' +
      '</div>';
    var select = $(tpl).appendTo(document.body);
    $.noScroll();
    var curVal = params.target.data("val");
    if (curVal) {
      curVal = curVal.split('/');
      $.each(curVal, function (i) {
        $("input[data-val='"+curVal[i]+"']").prop("checked",true);
      })
    }
    $(".gzl-select__mask, .gzl-select__box", select).show().addClass("show");
    $(".gzl-select__nav span", select).on("click", function () {
      $(this).addClass("active").siblings().removeClass("active");
      $(".gzl-select__list", select).hide().eq($(this).index()).fadeIn(200);
    });
    $(".gzl-select__option", select).on("click", function (e) {
      var index = $(this).parent().index();
      $(this).find("input").prop("checked", true);
      if(index<params.item.length - 1){
        $(".gzl-select__nav span", select).eq(index + 1).addClass("active").siblings().removeClass("active");
        $(".gzl-select__list", select).hide().eq(index + 1).fadeIn(200);
      }else{
        var curType = '';
        curVal = '';
        $("input:checked",select).each(function (i) {
          curVal += (i!==0?'/':'') + $(this).data("val");
          curType += (i!==0?'/':'') + $(this).data("type");
        });
        params.target.html(curVal).data({"val":curVal,"type":curType}).removeClass("placeholder");
        $.hideSelect();
      }
    });
    $(".gzl-select__close, .gzl-select__mask", select).on("click", function () {
      $.hideSelect();
    });
  };
  $.hideSelect = function () {
    $(".gzl-select-popup").find(".gzl-select__mask, .gzl-select__box").removeClass("show").transitionEnd(function () {
      $(".gzl-select-popup").remove();
      $.hasScroll();
    })
  };
})($);